<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>课程管理</template>
              <el-form
                ref="form"
                :model="form"
                label-position="top"
                style="{margin-left: auto; width: 60%}">
                  <el-form-item label="已开课程">
                    <el-select v-model="selectCourseId" size="mini" placeholder="请选择课程" style="width: 50%">
                      <el-option v-for="(item,index) in form.courses" :key="item.id" :label="item.course_name" :value="index"></el-option>
                    </el-select>
                    <el-button type="primary" @click="selectCourse">进入课程</el-button>
                  </el-form-item>
              </el-form>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>
              操作列表
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <el-button type="primary" @click="openCourse">我要开课</el-button>
<!--                <router-link :to="{name: 'teacherprofile', params: {user_name: this.user_name, teacherid: this.teacherid}}">我要开课</router-link>-->
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style=" font-size: 16px; color: white">
          <div style="float: left">
            <strong>航 助</strong> <small>课程选择中心</small>
          </div>
          <div style="float: right">
            {{this.user_name}}老师，欢迎您使用航助!
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="primary" @click="goLogin">退出登录</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <keep-alive v-if="isReloadData">
            <router-view />
          </keep-alive>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "TeacherMain",
    props: ['user_name', 'teacherid'],//teacherid是老师表的主键
    data() {
      return {
        selectCourseId: '',//选择的课程的主键
        form: {
          courses:[]
        },
        isReloadData: true,
      }
    },
    provide() {
        return {
          reload: this.reload,
          getCourses: this.getCourses
        };
    },
    // mounted() {
    //   this.getCourses();
    // },
    activated () {
　　　　this.getCourses();
　　},
    methods: {
      reload() {
        this.isReloadData = false;
        this.$nextTick(() => {
          this.isReloadData = true;
        });
      },
      selectCourse() {//进入学生列表
        console.log("选择课程主键" + this.selectCourseId);
        this.$router.push({name: 'courselist', params: {user_name: this.user_name, course_id:this.form.courses[this.selectCourseId].id, course_name: this.form.courses[this.selectCourseId].course_name}});
        // this.$router.go(0);
      },
      openCourse() {//开课
        this.$router.push({name: 'teacherprofile', params: {user_name: this.user_name, teacherid: this.teacherid}});
      },
      goLogin() {
        this.$router.push('/');
      },
      getCourses() {
        //修改路由
        //http://localhost:8080/static/mock/courselist.json
        //console.log(this.axios.get("http://localhost:8000/user/getCourse/?teacher_id=" + this.teacherid));
        console.log("get courses");
        console.log(this.teacherid);
        this.axios.get("http://localhost:8000/user/getCourse/?teacher_id=" + this.teacherid).then(response=>{//路由修改, teacherid是老师表主键
          console.log(response);
          this.form.courses = response.data.data.courselist;//返回给我该老师已开课程的列表（课程老师表里条目），格式看json，每个课程信息主键和课程名字
          console.log(this.form.courses);
          // if (response.data.code === 200) {//无用
          //     this.courses = response.data.data;
          //     console.log(this.courses);
          // } else {
          //     console.log(1);
          // }
        }).catch(function(error){
          console.log(error);
          // this.$message.error("系统错误");
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #409eff;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>
